﻿@{
    ViewBag.Title = "汽车清单";
}

@using WebCarERP.Models
@model   IEnumerable<RepairListModel>
<div class="col-xs-12 col-md-12">
    <div class="widget">
        <div class="widget-header ">
            <span class="widget-caption">修车清单</span>
            @*<div class="widget-buttons">
                http://wenku.baidu.com/link?url=YlzyjQ38aFlv-C56bLEBlvf-MBOIcDOVdK96C544NdptB68VaH8rh2opNi2iMgjxuyq558sYpKYKPUCSR1Pz9k3X8eZiEtMh6DLfLUGNB9S
                    <a href="#" data-toggle="maximize">
                        <i class="fa fa-expand"></i>
                    </a>
                    <a href="#" data-toggle="collapse">
                        <i class="fa fa-minus"></i>
                    </a>
                    <a href="#" data-toggle="dispose">
                        <i class="fa fa-times"></i>
                    </a>
                </div>*@
        </div>
        <div class="widget-body">
            <div class="table-toolbar">
                <a id="editabledatatable_new" href="javascript:void(0);" class="btn btn-default">
                    添加清单
                </a>

                @*<button id="bootbox-options" class="btn btn-darkorange">Bootbox Custom Form</button>*@
                <div class="btn-group pull-right">
                    @*<a class="btn btn-default" href="javascript:void(0);">Tools</a>
                        <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                        <ul class="dropdown-menu dropdown-default">
                            <li>
                                <a href="javascript:void(0);">Action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Another action</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">Something else here</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript:void(0);">Separated link</a>
                            </li>
                        </ul>*@
                </div>
            </div>
            <table class="table table-striped table-hover table-bordered" id="editabledatatable">
                <thead>
                    <tr role="row">
                        <th>
                            送修方
                        </th>
                        <th>
                            联系方式
                        </th>
                        <th>
                            修理日期
                        </th>
                        <th>
                            材料费
                        </th>
                        <th>
                            工时费
                        </th>
                        <th>
                            修理总金额
                        </th>
                        <th>
                            说明
                        </th>
                        <th>
                            经手人
                        </th>
                        <th>

                        </th>
                    </tr>
                </thead>

                <tbody>
                    @foreach (RepairListModel item in Model)
                    {
                        <tr>
                            <td>@item.repairParty</td>
                            <td>@item.repairPartyMobile</td>
                            <td>@(item.repairDate.HasValue ? Convert.ToDateTime(item.repairDate).ToString("yyyy-MM-dd") : "")</td>
                            <td class="center ">@item.materialCost</td>
                            <td class="center ">@item.workingHour</td>
                            <td class="center ">@item.TotalRepairAmount</td>
                            <td class="center ">@item.Memo</td>
                            <td class="center ">@item.brokerage</td>

                            <td>
                                <a href="#" class="btn btn-info btn-xs edit" dataid="@item.repairListNo" carid="@item.carID" cartype="@item.carType" company="@item.company" repairmaterial="@item.repairMaterial" unit="@item.unit" price="@item.price" brokerage="@item.brokerage" number="@item.number"><i class="fa fa-edit"></i> 编辑</a>
                                <a href="#" class="btn btn-danger btn-xs delete" dataid="@item.repairListNo"><i class="fa fa-trash-o"></i> 删除</a>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>
<!--Email Modal Templates-->

<div id="myModal" style="display:none;">
    @Html.AntiForgeryToken()

    <div class="row">

        <div class="col-md-12">
            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right">送修方姓名</label>
                <div class="col-sm-10">
                    <input name="repairParty" class="form-control " type="text" placeholder="送修方姓名">

                </div>
            </div>
            <div class="form-group">

                <label class="col-sm-2 control-label no-padding-right">联系电话</label>
                <div class="col-sm-10">
                    <input name="repairPartyMobile" class="form-control " type="text" placeholder="联系电话">

                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right">修理日期</label>
                <div class="col-sm-10">

                    <div class="input-group">
                        <input name="repairDate" class="form-control date-picker " type="text" data-date-format="yyyy-mm-dd">
                        <span class="input-group-addon">
                            <i class="fa fa-calendar"></i>
                        </span>
                    </div>

                </div>
            </div>
            <div class="form-group">

                <label class="col-sm-2 control-label no-padding-right">车号</label>
                <div class="col-sm-10">
                    <input name="carID" class="form-control " type="text" placeholder="车号">

                </div>
            </div>
            <div class="form-group">

                <label class="col-sm-2 control-label no-padding-right">车型</label>
                <div class="col-sm-10">
                    <input name="carType" class="form-control " type="text" placeholder="车型">

                </div>
            </div>
            <div class="form-group">

                <label class="col-sm-2 control-label no-padding-right">单位名称</label>
                <div class="col-sm-10">
                    <input name="company" class="form-control " type="text" placeholder="单位名称">

                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right">修理材料（工时）项目</label>
                <div class="col-sm-10">
                    <input name="repairMaterial" class="form-control " type="text" placeholder="修理材料（工时）项目">
                </div>
            </div><div class="form-group">
                <label class="col-sm-2 control-label no-padding-right">单位</label>
                <div class="col-sm-10">
                    <input name="unit" class="form-control " type="text" placeholder="单位">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right">数量</label>
                <div class="col-sm-10">
                    <input name="number" class="form-control " type="text" placeholder="数量">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right">单价</label>
                <div class="col-sm-10">
                    <input name="price" class="form-control " type="text" placeholder="单价">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right">材料费</label>
                <div class="col-sm-10">
                    <input name="materialCost" class="form-control " type="text" placeholder="材料费">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right">工时费</label>
                <div class="col-sm-10">
                    <input name="workingHour" class="form-control " type="text" placeholder="工时费">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right">经手人</label>
                <div class="col-sm-10">
                    <input name="brokerage" class="form-control " type="text" placeholder="经手人">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right">修理总金额</label>
                <div class="col-sm-10">
                    <input name="TotalRepairAmount" class="form-control " type="text" placeholder="修理总金额">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right">说明</label>
                <div class="col-sm-10">

                    <textarea name="Memo" class="form-control " placeholder="说明" rows="5" required=""></textarea>

                </div>
            </div>

        </div>


    </div>
</div>

<!--End Email Templates-->
<script type="text/javascript">
    var InitiateEditableDataTable = function () {
        return {
            init: function () {
                //Datatable Initiating
                var oTable = $('#editabledatatable').dataTable({
                    "aLengthMenu": [
                        [5, 15, 20, 100, -1],
                        [5, 15, 20, 100, "全部"]
                    ],
                    "iDisplayLength": 20,
                    "sPaginationType": "bootstrap",
                    "sDom": "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>",
                    "oTableTools": {
                        "aButtons": [
                            //"copy",
                            //"print",
                            //{
                            //    "sExtends": "collection",
                            //    "sButtonText": "Save <i class=\"fa fa-angle-down\"></i>",
                            //    "aButtons": ["csv", "xls", "pdf"]
                            //}
                        ],
                        "sSwfPath": "assets/swf/copy_csv_xls_pdf.swf"
                    },
                    "language": {
                        "search": "",
                        "sLengthMenu": "_MENU_",
                        "oPaginate": {
                            "sPrevious": "上一页",
                            "sNext": "下一页"
                        }
                    },
                    "aoColumns": [
                      null,
                      null,
                      null,
                      null,
                      null,
                      null,
                      null,
                      null,
                      { "bSortable": false }
                    ]
                });

                var isEditing = null;

                //Add New Row
                //$('#editabledatatable_new').click(function (e) {
                //e.preventDefault();
                //var aiNew = oTable.fnAddData(['', '', '', '',
                //        '<a href="#" class="btn btn-success btn-xs save"><i class="fa fa-edit"></i> 保存</a> <a href="#" class="btn btn-warning btn-xs cancel" data-mode="new"><i class="fa fa-times"></i> 取消</a>'
                //]);
                //var nRow = oTable.fnGetNodes(aiNew[0]);
                //editAddedRow(oTable, nRow);
                //isEditing = nRow;
                //});

                //Delete an Existing Row
                $('#editabledatatable').on("click", 'a.delete', function (e) {
                    //e.preventDefault();

                    var dataid = $(this).attr('dataid');
                    if (confirm("确认删除此条数据?") == false) {
                        return;
                    } else {
                        $.post("/RepairList/delete", {
                            InfoId: dataid,
                            __RequestVerificationToken: $("input[name='__RequestVerificationToken']").val(),
                        }, function (data) {

                            alert(data.result);
                            location.reload();
                        }, "json");

                    }

                    //var nRow = $(this).parents('tr')[0];
                    //oTable.fnDeleteRow(nRow);
                    //alert("Row Has Been Deleted!");
                });

                //Cancel Editing or Adding a Row
                $('#editabledatatable').on("click", 'a.cancel', function (e) {
                    e.preventDefault();
                    if ($(this).attr("data-mode") == "new") {
                        var nRow = $(this).parents('tr')[0];
                        oTable.fnDeleteRow(nRow);
                        isEditing = null;
                    } else {
                        restoreRow(oTable, isEditing);
                        isEditing = null;
                    }
                });

                //Edit A Row
                $('#editabledatatable').on("click", 'a.edit', function (e) {
                    e.preventDefault();
                    var nRow = $(this).parents('tr')[0];
                    var aData = oTable.fnGetData(nRow);
                    //   var birthday = $(this).attr('birthday');
                    var dataid = $(this).attr('dataid');
                    //alert(dataid);
                    //alert(birthday);
                    var carID = $(this).attr('carID');
                    carID = typeof (carID) == 'undefined' ? '' : carID;
                    var carType = $(this).attr('carType');
                    carType = typeof (carType) == 'undefined' ? '' : carType;
                    var company = $(this).attr('company');
                    company = typeof (company) == 'undefined' ? '' : company;
                    var repairMaterial = $(this).attr('repairMaterial');
                    repairMaterial = typeof (repairMaterial) == 'undefined' ? '' : repairMaterial;
                    var unit = $(this).attr('unit');
                    unit = typeof (unit) == 'undefined' ? '' : unit;
                    var price = $(this).attr('price');
                    price = typeof (price) == 'undefined' ? '' : price;
                    var brokerage = $(this).attr('brokerage');
                    brokerage = typeof (brokerage) == 'undefined' ? '' : brokerage;
                    var number = $(this).attr('number');
                    number = typeof (number) == 'undefined' ? '' : number;
                    bootbox.dialog({
                        message: "<style>.datepicker{z-index: 99999 !important}<\/style><form  class='form-horizontal '  name = \"myform1\", id = \"myform1\", onsubmit=\"false\">" + $("#myModal").html() + "<input type='hidden' name='repairListNo' value='" + dataid + "'/></form><script>  $('.date-picker').datepicker();document.myform1.repairParty.value='" + aData[0] + "';document.myform1.repairPartyMobile.value='" + aData[1] + "';document.myform1.repairDate.value='" + aData[2] + "';document.myform1.materialCost.value='" + aData[3] + "';;document.myform1.workingHour.value='" + aData[4] + "';document.myform1.TotalRepairAmount.value='" + aData[5] + "';document.myform1.Memo.value='" + (aData[6].replace(/\n/g, '  ')) + "';document.myform1.carID.value='" + carID + "';document.myform1.carType.value='" + carType + "';document.myform1.company.value='" + company + "';document.myform1.repairMaterial.value='" + repairMaterial + "';document.myform1.unit.value='" + unit + "';document.myform1.price.value='" + price + "';document.myform1.brokerage.value='" + brokerage + "';document.myform1.number.value='" + number + "';<\/script>",//
                        title: "添加清单",
                        className: "modal-darkorange",
                        buttons: {
                            success: {
                                label: "保存",
                                className: "btn-blue",
                                callback: function () {
                                    //var postData = {
                                    //    Name: decodeURIComponent($('.Name').val()),
                                    //    Mobile: decodeURIComponent($('.Mobile').val()),
                                    //    MoreMobile: decodeURIComponent($('.MoreMobile').val()),
                                    //    Sex: decodeURIComponent($('#Sex').val()),
                                    //    Birthday: $('.Birthday').val(),
                                    //    StartDate: $('.StartDate').val(),
                                    //    EndDate: $('.EndDate').val(),
                                    //    EndDate: decodeURIComponent($('.EndDate').val()),
                                    //};
                                    //alert($("#myform").serialize());
                                    $.ajax({
                                        cache: true,
                                        type: "POST",
                                        url: '/RepairList/edit',//"/Login/CheckUserLogin"
                                        data: $("#myform1").serialize(),// 你的formid
                                        async: false,
                                        dataType: 'json',
                                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                                            alert(XMLHttpRequest.status);
                                            alert(XMLHttpRequest.readyState);
                                            alert(textStatus);
                                        },
                                        success: function (data) {
                                            alert(data.result);
                                            location.reload();

                                            //$("#commonLayout_appcreshi").parent().html(data);
                                            //$(this).click(function (e) {
                                            //e.preventDefault();
                                            //var aiNew = oTable.fnAddData([data.data[0].Name, '', '', '', '', '', '',
                                            //        '<a href="#" class="btn btn-info btn-xs edit"><i class="fa fa-edit"></i> 编辑</a><a href="#" class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i> 删除</a>'
                                            //]);
                                            //var nRow = oTable.fnGetNodes(aiNew[0]);
                                            //editAddedRow(oTable, nRow);
                                            //isEditing = nRow;
                                            //});


                                        }
                                    });

                                }
                            },
                            "取消": {
                                className: "btn-danger",
                                callback: function () { }
                            }
                        }
                    });
                    //});

                });

                //Save an Editing Row
                $('#editabledatatable').on("click", 'a.save', function (e) {
                    e.preventDefault();
                    if (this.innerHTML.indexOf("Save") >= 0) {
                        saveRow(oTable, isEditing);
                        isEditing = null;
                        //Some Code to Highlight Updated Row
                    }
                });


                function restoreRow(oTable, nRow) {
                    var aData = oTable.fnGetData(nRow);
                    var jqTds = $('>td', nRow);

                    for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
                        oTable.fnUpdate(aData[i], nRow, i, false);
                    }

                    oTable.fnDraw();
                }

                function editRow(oTable, nRow) {
                    var aData = oTable.fnGetData(nRow);
                    var jqTds = $('>td', nRow);
                    jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '">';
                    jqTds[1].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[1] + '">';
                    jqTds[2].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[2] + '">';
                    jqTds[3].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[3] + '">';
                    jqTds[4].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[4] + '">';
                    jqTds[5].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[5] + '">';
                    jqTds[6].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[6] + '">';
                    jqTds[7].innerHTML = '<a href="#" class="btn btn-success btn-xs save"><i class="fa fa-save"></i> 保存</a> <a href="#" class="btn btn-warning btn-xs cancel"><i class="fa fa-times"></i> 取消</a>';
                }

                function editAddedRow(oTable, nRow) {
                    var aData = oTable.fnGetData(nRow);
                    var jqTds = $('>td', nRow);
                    jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '">';
                    jqTds[1].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[1] + '">';
                    jqTds[2].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[2] + '">';
                    jqTds[3].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[3] + '">';
                    jqTds[4].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[4] + '">';
                    jqTds[5].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[5] + '">';
                    jqTds[6].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[6] + '">';
                    jqTds[7].innerHTML = aData[7];
                }

                function saveRow(oTable, nRow) {
                    var jqInputs = $('input', nRow);
                    oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
                    oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
                    oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
                    oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
                    oTable.fnUpdate('<a href="#" class="btn btn-info btn-xs edit"><i class="fa fa-edit"></i> Edit</a> <a href="#" class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i> Delete</a>', nRow, 4, false);
                    oTable.fnDraw();
                }

                function cancelEditRow(oTable, nRow) {
                    var jqInputs = $('input', nRow);
                    oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
                    oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
                    oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
                    oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
                    oTable.fnUpdate('<a href="#" class="btn btn-info btn-xs edit"><i class="fa fa-edit"></i> Edit</a> <a href="#" class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i> Delete</a>', nRow, 4, false);
                    oTable.fnDraw();
                }


            }

        };
    }();
    InitiateEditableDataTable.init();

    //--Jquery Select2--



    $("#editabledatatable_new").on('click', function () {
        bootbox.dialog({
            message: "<style>.datepicker{z-index: 99999 !important}<\/style><form  class='form-horizontal '  name = \"myform\", id = \"myform\", onsubmit=\"false\">" + $("#myModal").html() + "</form><script>  $('.date-picker').datepicker();<\/script>",
            title: "添加清单",
            className: "modal-darkorange",
            buttons: {
                success: {
                    label: "保存",
                    className: "btn-blue",
                    callback: function () {
                        //var postData = {
                        //    Name: decodeURIComponent($('.Name').val()),
                        //    Mobile: decodeURIComponent($('.Mobile').val()),
                        //    MoreMobile: decodeURIComponent($('.MoreMobile').val()),
                        //    Sex: decodeURIComponent($('#Sex').val()),
                        //    Birthday: $('.Birthday').val(),
                        //    StartDate: $('.StartDate').val(),
                        //    EndDate: $('.EndDate').val(),
                        //    EndDate: decodeURIComponent($('.EndDate').val()),
                        //};
                        //alert($("#myform").serialize());
                        $.ajax({
                            cache: true,
                            type: "POST",
                            url: '/RepairList/add',//"/Login/CheckUserLogin"
                            data: $("#myform").serialize(),// 你的formid
                            async: false,
                            dataType: 'json',
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                alert(XMLHttpRequest.status);
                                alert(XMLHttpRequest.readyState);
                                alert(textStatus);
                            },
                            success: function (data) {
                                alert(data.result);
                                location.reload();

                                //$("#commonLayout_appcreshi").parent().html(data);
                                //$(this).click(function (e) {
                                //e.preventDefault();
                                //var aiNew = oTable.fnAddData([data.data[0].Name, '', '', '', '', '', '',
                                //        '<a href="#" class="btn btn-info btn-xs edit"><i class="fa fa-edit"></i> 编辑</a><a href="#" class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i> 删除</a>'
                                //]);
                                //var nRow = oTable.fnGetNodes(aiNew[0]);
                                //editAddedRow(oTable, nRow);
                                //isEditing = nRow;
                                //});


                            }
                        });

                    }
                },
                "取消": {
                    className: "btn-danger",
                    callback: function () { }
                }
            }
        });
    });

</script>
